<template>
	<view class="container">
		<view class="stickyClass">
		  <v-tabhead @barTap="barTap" :headItems="headItems" :activeIndex="activeTabIndex"></v-tabhead>
		</view>
		<swiper @change="changeTab" :current="activeTabIndex" class="swiperContainer">
		  <swiper-item v-for="(tabItem, index) in headItems" :key="index">
		    <view class="swiperContainer">
				<block v-if="index==0">
					<view class="type">纠错类型</view>
					<view class="reason">
						<view class="reason-item" :class='[activeIndex===index?"active":""]' v-for="(item, index) in items" :key="index"
						 @click="change(index,item.value)">{{item.name}}</view>
					</view>
					<textarea v-if="activeTabIndex==0" class="content" :placeholder="placeholder" placeholder-class="placeholder" v-model="errorColContent"></textarea>
				</block>
				<block v-else>
					<textarea v-if="activeTabIndex==1" class="content" :placeholder="placeholder" placeholder-class="placeholder" v-model="questionContent"></textarea>
				</block>
				<button type="primary" class="submit-btn" @click="submitErrorCollection(index)">提交</button>
			</view>
		  </swiper-item>
		</swiper>
		
	</view>
</template>
<script>
	import VTabhead from "./fragments/tabhead";
	import ExamService from '@/services/exam/exam';
	const service = new ExamService();
	export default {
		 components: {
		  VTabhead,
		},
		data() {
			return {
				items: [{
						value: '1',
						name: '错别字',
					},
					{
						value: '2',
						name: '答案解析不匹配'
					},
					{
						value: '3',
						name: '解析错误'
					},
					{
						value: '4',
						name: '其它'
					}
				],
				placeholder: "请描述试题的具体问题，便于工作人员对试题进行校正",
				activeIndex: 0,
				errorType: 1,
				errorColContent: "",
				questionContent:"",
				paperId: "",
				subjectId: "",
				activeTabIndex:0,
				headItems:[
					{
					  code: "1",
					  title: "纠错"
					},
					{
					  code: "2",
					  title: "提问"
					}
				],
			};
		},
		onLoad(query){
			this.paperId = query.paperId;
			this.subjectId = query.subjectId;
		},
		methods: {
			barTap(activeIndex) {
			  this.activeTabIndex = activeIndex;
			},
			changeTab(e) {
			  let index = e.target.current;
			  this.activeTabIndex = index;
			},
			change(index, value) {
				this.activeIndex = index;
				this.errorType = value;
			},
			submitErrorCollection(is_flag) {
				const {
					errorColContent,
					questionContent,
					paperId,
					subjectId,
					errorType
				} = this;
				let content = is_flag==0?errorColContent:questionContent;
				if (content == undefined || content == "") {
					uni.showToast({
						title:'请填写反馈内容',
						icon:'none',
						duration:2000
					});
					return;
				}
				content = content.replace(/(^\s*)|(\s*$)/g, "");
				if (content=='') {
					uni.showToast({
						title:'内容不能为空',
						icon:'none',
						duration:2000
					});
					return;
				}
				let param = {
					paperId: paperId,
					subjectId: subjectId,
					errorType: errorType,
					errorDesc: content,
					is_flag
				}
				// console.log('params:',JSON.stringify(param));
				service.saveErrorCollection(param).then(response => {
					this.handleResult(response);
				})
			},
			handleResult(response) {
				if (response.success) {
					uni.showToast({
						title: '保存纠错信息成功！',
						duration: 2000,
						icon: "none",
					});
					this.goBack();
				} else {
					uni.showToast({
						title: '保存纠错信息失败！',
						duration: 2000,
						icon: "none"
					});
				}
			},
			goBack() {
				setTimeout(function() {
					uni.navigateBack({
						delta:1
					})
				}, 2000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.type {
		font-size: 30upx;
		color: #333333;
		font-weight: 600;
		padding: 40upx 20upx;
	}

	.reason-item {
		display: inline-block;
		padding: 20upx 22upx;
		margin: 0 20upx;
		font-size: 24upx;
		color: #333333;
		border-radius: 8upx;
		border: solid 1px #d8d8d8;
	}

	.active {
		background-color: #5ea1f8;
		border-radius: 8upx;
		color: #ffffff;
		border: none;
	}

	.content {
		width: 710upx;
		height: 400upx;
		margin: 60upx auto 200upx;
		padding: 40upx 20upx;
		background-color: #ffffff;
		border: solid 2upx #d8d8d8;
		color: #333333;
		font-size: 28upx;
	}

	.submit-btn {
		width: 590upx;
		height: 80upx;
		background-color: #5ea1f8;
		border-radius: 8upx;
		font-size: 28upx;
		color: #ffffff;
	}

	.placeholder {
		font-size: 28upx;
		color: #d8d8d8;
	}
	.swiperContainer {
	  width: 100%;
	  height: calc(100vh - 30px);
	  flex: 1;
	  background-color: #fff;
	  overflow-y: scroll;
	}
	
	.tab_head {
	  border-bottom: 1px solid #f1f1f1;
	}
	.list__content {
	  background-color: #fff;
	}
</style>
